<template>
  <a-cascader
    :disabled="disabled"
    :options="options"
    :load-data="loadData"
    placeholder="选择关联设备设施"
    change-on-select
    @change="onChange"
    :value="value"
    :getPopupContainer="getPopupContainer"
  />
</template>

<script>
  import {ajaxGetDictItems, getDictItemsFromCache} from '@/api/api'

  export default {
    name: 'SelectSbssCascader',
    props: {
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      value: {
        type: Array,
        required: false
      },
      getPopupContainer: {
        type: Function,
        default: (node) => node.parentNode
      }
    },
    watch: {
      'value': {
        immediate: true,
        handler(val) {
          if (val && val[0]) {
            this.options.forEach((e) => {
              if (e.value === val[0]) {
                this.loadData([e]);
              }
            })
          }
          console.log('watch', val)
        }
      }
    },
    data() {
      return {
        options: [
          {
            value: 'hmhb_base_production_info',
            label: '生产装置',
            dict: 'hmhb_base_production_info,name,id,del_flag=0 and audit_status=2',
            isLeaf: false
          },
          {
            value: 'tb_base_storage_tank_area_info',
            label: '储罐区',
            dict: 'tb_base_storage_tank_area_info,name,id,del_flag=0 and audit_status=2',
            isLeaf: false
          },
          {
            value: 'tb_base_storage_tank_info',
            label: '储罐',
            dict: 'tb_base_storage_tank_info,name,id,del_flag=0 and audit_status=2',
            isLeaf: false
          },
          {
            value: 'tb_base_warehouse_area_info',
            label: '仓库区',
            dict: 'tb_base_warehouse_area_info,name,id,del_flag=0 and audit_status=2',
            isLeaf: false
          },
          {
            value: 'tb_base_warehouse_info',
            label: '仓库',
            dict: 'tb_base_warehouse_info,name,id,del_flag=0 and audit_status=2',
            isLeaf: false
          },
          {
            value: 'tb_base_other_device_info',
            label: '其他设备设施',
            dict: 'tb_base_other_device_info,name,id,del_flag=0 and audit_status=2',
            isLeaf: false
          }
        ],
        dictCode: ''

      }
    },
    methods: {
      loadData(selectedOptions) {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        this.dictCode = targetOption.dict;
        targetOption.loading = true;
        // 优先从缓存中读取字典配置
        if (getDictItemsFromCache(this.dictCode)) {
          targetOption.loading = false;
          let children = getDictItemsFromCache(this.dictCode);
          children.forEach((e) => {
            e.label = e.title
          })
          targetOption.children = children;
          this.options = [...this.options];
          return
        }

        // 根据字典Code, 初始化字典数组
        ajaxGetDictItems(this.dictCode, null).then((res) => {
          if (res.success) {
            targetOption.loading = false;
            let children = res.result;
            children.forEach((e) => {
              e.label = e.title
            })
            targetOption.children = children;
            this.options = [...this.options];
          }
        })
      },
      initDictData() {

      },
      onChange(value) {
        console.log(value);
        this.$emit('change', value);
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style scoped>

</style>
